<template>
  <!-- 
      过滤器:
        * 过滤器是什么
          对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)
        * 过滤器分类
          - 局部过滤器
          - 全局过滤器
        * 过滤器书写方式
          - 在配置项中使用filters配置项添加过滤器函数
          - 过滤器函数的第一个参数是被过滤的数据
          - 过滤器函数的第二个参数是过滤器调用是可选的传参
          - 过滤器函数return的值就是最终过滤出来的值
          - 在插值语法中 使用 `数据 | 过滤器` 的语法使用某个过滤器
          - 在插值语法中 使用`数据|过滤器|过滤器|...`的语法直接使用多个过滤器
     -->
  <div class="outer">
    <h1>Header组件</h1>
    <p>totalPrice:{{ count | toFixed(6) }}</p>
    <p>totalPrice:{{ 9999 | toFixed(1) | add$ }}</p>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      count: 10000,
    };
  },
  //注册一个过滤器
  filters: {
    toFixed(value, num) {
      console.log("111", value, num);
      return value.toFixed(num);
    },
    add$(value) {
      return "$" + value;
    },
  },
};
</script>

<style scoped>
.outer {
  background: red;
}
</style>
